<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>


    <!-- 卡片区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" @keyup.enter.native="getGoodList()" v-model="queryInfo.query"
            clear="getGoodList()" clearable>
            <el-button slot="append" icon="el-icon-search" @click="getGoodList()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="goAddPage">添加商品</el-button>
        </el-col>
      </el-row>

      <!-- 表格区 -->
      <el-table :data="goodsList" style="width: 100%" border stripe>
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格(元)" width="105">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" width="80">
        </el-table-column>
        <el-table-column prop="add_time" label="创建时间" width="170">
          <template slot-scope="{row}">
            {{$dayjs(row.add_time).format('YYYY-MM-DD HH:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column prop="prop" label="操作" width="120">
          <template slot-scope="{row}">
            <el-button style="margin-right:10px" type="primary" @click="editGood(row)" icon="el-icon-edit" size="mini">
            </el-button>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delGoodById(row)">
              <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini">
              </el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination style="margin-top:15px" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15]" :page-size="queryInfo.pagesize"
        layout="prev, pager, next, jumper,->,total, sizes" :total="total">
      </el-pagination>
    </el-card>


    <!-- 编辑的对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisibleEdit" width="50%">
      <el-form ref="editForm" :rules="editRules" :model="editGoodList" label-width="80px">
        <el-form-item label="商品名称" prop="goods_name">
          <el-input v-model="editGoodList.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="goods_price">
          <el-input v-model="editGoodList.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="商品重量" prop="goods_weight">
          <el-input v-model="editGoodList.goods_weight"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "List",
    data() {
      return {
        //请求需要的参数
        queryInfo: {
          query: "",
          pagenum: 1,
          pagesize: 5,
        },
        //商品列表
        goodsList: [],
        total: 0,
        //编辑对话框的隐藏与显示
        dialogVisibleEdit: false,
        //修改商品参数需要的参数
        editGoodList: {},
        //修改参数的验证规则
        editRules: {
          goods_name: [{
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }, ],
          goods_price: [{
            required: true,
            message: '请输入商品价格',
            trigger: 'blur'
          }, ],
          goods_weight: [{
            required: true,
            message: '请输入商品重量',
            trigger: 'blur'
          }, ],
        }
      }
    },
    methods: {
      //获取商品数据列表
      async getGoodList() {
        let result = await this.$requests.get("goods", {
          params: this.queryInfo

        })
        if (result.meta.status == 200) {
          this.goodsList = result.data.goods
          this.total = result.data.total
        }
      },
      // 监听pagesize改变的方法
      handleSizeChange(page) {
        this.queryInfo.pagesize = page
        this.getGoodList()

      },
      // 监听pagenum的改变
      handleCurrentChange(count) {
        this.queryInfo.pagenum = count
        this.getGoodList()
      },
      //删除按钮的回调
      async delGoodById(row) {
        let result = await this.$requests.delete(`goods/${row.goods_id}`)
        if (result.meta.status == 200) {
          this.$message.success("删除成功")
          this.getGoodList()
        } else {
          this.$message.error("网络不佳,请稍后再试")
          return
        }
      },
      //添加商品按钮的回调
      goAddPage() {
        this.$router.push("/goods/add")
      },
      //编辑按钮的回调
      editGood(row) {
        this.editGoodList = JSON.parse(JSON.stringify(row))
        this.dialogVisibleEdit = true
      },
      //修改框确认按钮的回调
      submitForm() {
        this.$refs.editForm.validate(async (valid) => {
          if (valid) {
            //接口有问题
            // let result = await this.$requests.put(`goods/${this.editGoodList.goods_id}`, {
            //   goods_name: this.editGoodList.goods_name,
            //   goods_price: this.editGoodList.goods_price,
            //   goods_number: this.editGoodList.goods_number,
            //   goods_weight: this.editGoodList.goods_weight,
            // })
            this.$message.error("暂时不能修改")
            this.dialogVisibleEdit = false
          } else {
            this.$message.error("请认真填写表单项")
            return false;
          }
        });
      },
    },
    mounted() {
      this.getGoodList()
    },
  }

</script>

<style lang="less" scoped>

</style>
